<!--
 * @Author: 273198238 '2412069378@qq.com'
 * @Date: 2025-03-12 18:08:41
 * @LastEditors: 273198238 '2412069378@qq.com'
 * @LastEditTime: 2025-03-13 11:32:25
 * @FilePath: \vue-managed\src\views\Self.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="self">
        <div class="form">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model.number="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <select v-model="ruleForm.address.shengfen">
                        <option v-for="province in provinces" :key="province" :value="province">
              {{ province }}
            </option>                       
                    </select>
                    &nbsp;
                    <select v-model="ruleForm.address.shi">
                        <option v-for="citiesByProvince in citiesByProvince[ruleForm.address.shengfen]" :key="citiesByProvince" :value="citiesByProvince">{{ citiesByProvince }}</option>
                        
                    </select>
                    &nbsp;
                    <select v-model="ruleForm.address.qu">
                        <option v-for="districtsByCity in districtsByCity[ruleForm.address.shi]" :key="districtsByCity" :value="districtsByCity">{{ districtsByCity }}</option>
                    </select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Self',
    data() {
        return {
            ruleForm: {
                name: "",
                sex: "",
                age: "",
                address: {
                    shengfen: "四川省",
                    shi: "成都市",
                    qu: "金牛区",
                },
            },
            provinces: ['四川省', '陕西省'],
            citiesByProvince: {
                '四川省': ['成都市', '绵阳市'],
                '陕西省': ['汉中市']
            },
            districtsByCity: {
                '成都市': ['青羊区', '金堂县'],
                '绵阳市': ['涪城区', '游仙区'],
                '汉中市': ['汉台区', '南郑区']
            },
            rules: {
                name: [
                    { required: true, message: "姓名不能为空", trigger: "blur" },
                ],
                sex: [
                    { required: true, message: "性别不能为空", trigger: "blur" },
                ],
                age: [
                    { required: true, message: "年龄不能为空", trigger: "blur" },
                    { type: "number", message: "年龄必须为数字值", trigger: "blur" },
                ],
                address: [
                    { required: true, message: "地址不能为空", trigger: "blur" },
                ],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    computed: {
        cities() {
            return this.citiesByProvince[this.ruleForm.address.shengfen];
        },
        districts() {
            return this.districtsByCity[this.ruleForm.address.shi];
        },
        
    },
    watch:{        
        'ruleForm.address.shengfen'(newValue,oldValue){
                this.ruleForm.address.shi = this.cities[0]
            },
            'ruleForm.address.shi'(newValue,oldValue){
                this.ruleForm.address.qu = this.districts[0]
            }
        
        }
}
</script>

<style></style>